<template>
	<view class="grace-number-box" @tap.stop="">
		<view class="grace-number-box-addreduce" :class="{'large': isLarge}" @tap.stop="reduce">
			<image src="../static/img/gwcjianhao@2x.png"></image>
		</view>
		<input 
			class="grace-number-box-input" 
			type="number" 
			:value="inputNumber" 
			:disabled="disabled" 
			@blur="blur" 
			:style="{
				backgroundColor:inputBG, 
				height:inputHeight, 
				lineHeight:inputHeight, 
				fontSize:inputFontSize, 
				color:inputColor, 
				borderRadius:inputBorderRadius, 
				width: width}">
		</input>
		<view class="grace-number-box-addreduce" :class="{'large': isLarge}" @tap.stop="add">
			<image src="../static/img/gwcjiahao@2x.png"></image>
		</view>
	</view>
</template>
<script>
	export default {
		name: "graceNumberBox",
		props: {
			disabled: {
				type: Boolean,
				default: true
			},
			value: {
				type: Number,
				default: 1
			},
			index: {
				type: Number,
				default: 0
			},
			maxNum: {
				type: Number,
				default: 999999
			},
			minNum: {
				type: Number,
				default: 1
			},
			datas: {
				type: String,
				default: ''
			},
			inputHeight: {
				type: String,
				default: '60rpx'
			},
			inputFontSize: {
				type: String,
				default: '36rpx'
			},
			inputColor: {
				type: String,
				default: '#000000'
			},
			inputBG: {
				type: String,
				default: '#ffffff'
			},
			inputBorderRadius: {
				type: String,
				default: '4rpx'
			},
			width: {
				type: String,
				default: '70rpx'
			},
			isLarge: {
				type: Boolean,
				default: true
			},
			cartId: {
				default: ''
			},
			isDelete: false
		},
		data() {
			return {
				inputNumber: 1
			}
		},
		created() {
			this.inputNumber = this.value
		},
		watch: {
			value(val) {
				this.inputNumber = val;
			},
			inputNumber(val) {
				val = Number(val);
				if (val > this.maxNum) {
					val = this.maxNum;
					this.inputNumber = val;
				}
				if (val < this.minNum) {
					val = this.minNum;
					this.inputNumber = val;
				}
				this.$emit('change', [val, this.index, this.datas]);
			}
		},
		methods: {
			add: function(e) {
				var newVal = this.inputNumber + 1;
				this.inputNumber = Number(newVal);
				if (this.cartId && this.isDelete) {
					this.cartHandle()
				}
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			reduce: function(e) {
				var newVal = this.inputNumber - 1;
				this.inputNumber = newVal;
				if (this.inputNumber > 0 && this.cartId && this.isDelete) {
					this.cartHandle()
				}
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			blur: function(e) {
				this.inputNumber = Number(e.detail.value);
			},
			cartHandle: function() {
				this.$http.ajax({
					url: '/ShoppingTrolley/edit',
					params: {
						'id': this.cartId,
						'goodsNumber': this.inputNumber,
						'openId': uni.getStorageSync('openId')
					}
				}).then((res) => {
					if (res.code == 200) {
						
					} else {
						this.$api.msg(res.msg)
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.grace-number-box {
		overflow: hidden;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.grace-number-box-addreduce {
		width:60rpx;
		height:60rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width:34rpx;
			height:34rpx;
		}
	}

	.grace-number-box-input {
		width:70rpx;
		height:60rpx;
		margin: 0 10rpx;
		text-align: center;
		min-height: 0;
	}
	
	.large {
		width:70rpx;
		height:60rpx;
	}
</style>
